<template>
  <div class="nnn-contain">
    <el-container>
      <el-header style="height: 100%">
        <el-card>
          <el-form :inline="true" size="small">
            <el-row align="middle" :gutter="10">
              <el-col :span="6">
                <el-form-item label="素材名称">
                  <el-input
                    v-model="source"
                    size="small"
                    placeholder="输入要搜索的素材名称"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="素材类别">
                  <el-select
                    v-model="value"
                    size="small"
                    placeholder="---请选择---"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>

                  <el-select
                    v-model="value"
                    style="padding-left: 15px"
                    size="small"
                    placeholder="--- 请选择---"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-button
                  size="small"
                  type="primary"
                  @click="query"
                >查询</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="reset"
                >重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-button
          type="primary"
          size="small"
          style="margin: 10px"
          @click="empty"
        >上传素材</el-button>
      </el-header>

      <el-footer>
        <el-card>
          <el-table :data="aab ? tableDate : tableData" style="width: 100%">
            <el-table-column prop="materialName" label="素材名称" width="" />
            <el-table-column label="素材图" width="">
              <template slot-scope="scope">
                <el-image :key="scope.row.id" style="height:50px; width:70px" :src="scope.row.materialMap" :preview-src-list="[scope.row.materialMap]" />
              </template>
            </el-table-column>
            <el-table-column
              prop="materialCategory"
              label="素材类别"
              width=""
            />
            <el-table-column prop="price" label="价格" width="" />
            <el-table-column prop="materialShelf" label="上传日期" width="" />
            <el-table-column label="操作" width="">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="edit(scope.$index, scope.row)"
                  @click="showDia = true"
                >编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-footer>

      <el-dialog title="上传素材" :visible.sync="showDia" width="30%" center>
        <el-row />
        <el-form>
          <el-form-item label="素材名称:">
            <input v-model="editsource" type="text">
          </el-form-item>
          <el-form-item label="素材类别:">
            <el-select v-model="newValue" size="small" placeholder="---请选择---">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
            <el-select
              v-model="newValue"
              style="margin-left: 73px"
              size="small"
              placeholder="--- 请选择---"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="素材价格">
            <input v-model="newPrice" type="text"> 元
          </el-form-item>
          <el-form-item label="素材上传">
            <el-upload
              list-type="picture-card"
              :limit="1"
              action="#"
              :file-list="fileList"
              :on-remove="handleRemove"
              :on-change="changeFile"
              :before-upload="beforeUpload"
              :http-request="upload"
              :class="{disable : fileComputed}"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="confirmOn"
          >确定上传</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDWsxmKcdPu96mBKD7oGSO4UgdLnzvay52',
  SecretKey: 'lHYaNvEJAm9F5ewxg8JDqCG3YomTt3wY'
})
import { getMaterialList, getMaterialCategory, modifyData, getNewDate, uploadDate } from '@/api/library'
export default {
  name: 'Nnn',
  data() {
    return {
      fileList: [],
      options: [
        {
          value: '选项1',
          label: '1'
        },
        {
          value: '选项2',
          label: '2'
        }
      ],
      tableData: [],
      tableDate: [],
      source: '',
      editsource: '',
      newPrice: '',
      loader: '',
      value: '',
      aab: false,
      showDia: false,
      a: [],
      b: '',
      newValue: '',
      c: true,
      newDate: [
      ]
    }
  },
  computed: {
    fileComputed() {
      return this.fileList.length === 1
    }
  },
  watch: {},
  created() {
    this.getMaterialListe()

    this.getNewDate()
  },
  mounted() {},
  methods: {
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    changeFile(file, fileList) {
      this.fileList = fileList.map(item => item)
    },
    beforeUpload(file) {
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.some(item => item === file.type)) {
        this.$message.error('上传图片只能是JPN,GIF,BMP,PNG格式!')
        return false
      }
      const maxSize = 5 * 1024 * 1024
      if (maxSize < file.size) {
        this.$message.error('上传图片不能大于5M')
        return false
      }
      this.currentFileUid = file.uid
      this.showPercent = true
      return true
    },
    upload(params) {
      // console.log(params.file)
      if (params.file) {
        cos.putObject({
          Bucket: 'qd-1306627362',
          Region: 'ap-nanjing',
          Key: params.file.name, // 文件名
          Body: params.file, // 要上传的文件对象
          StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
          onProgress: (params) => {
            this.percent = params.percent * 100
          }
        }, (err, data) => {
          // console.log(err || data)
          if (!err && data.statusCode === 200) {
            this.fileList = this.fileList.map(item => {
              if (item.uid === this.currentFileUid) {
                return { url: 'http://' + data.Location, upload: true }
              }
              return item
            })
            setTimeout(() => {
              this.showPercent = false // 隐藏进度条
              this.percent = 0 // 进度归0
            }, 2000)
            console.log(this.fileList)
          }
        })
      }
    },
    async getMaterialListe() {
      this.tableData = await getMaterialList()
    },
    async getMaterialCategory() {
      this.tableDate = await getMaterialCategory(this.value)
    },
    async getNewDate() {
      this.newDate = await getNewDate()
    },
    reset() {
      this.aab = false
      this.source = ''
      this.loader = ''
      this.value = ''
    },
    empty() {
      this.showDia = true
      this.editsource = ''
      this.c = false
    },
    edit(i, row) {
      this.a = row
      this.b = i
      this.editsource = row.materialName
      this.newPrice = row.price
    },
    async confirmOn() {
      if (!this.c) {
        console.log(this.newDate)
        this.newDate[0].materialName = this.editsource
        this.newDate[0].price = this.newPrice
        this.newDate[0].materialCategory = this.newValue
        this.newDate[0].materialMap = this.fileList[0].url

        this.newDate = this.newDate[0]
        console.log(this.newDate)
        await uploadDate(this.newDate)
      } else {
        this.b += 1
        this.a.materialName = this.editsource
        this.a.price = this.newPrice
        this.a.materialCategory = this.newValue
        this.a.materialMap = this.fileList[0].url

        await modifyData(this.b, this.a)
        this.showDia = false
      }
    },
    query() {
      if (this.source !== '') {
        const a = this.tableData.some((item) => {
          if (item.materialName === this.source || item.uploaderId === this.loader) {
            this.aab = true
            this.tableDate = []
            return this.tableDate.push(item)
          }
        })
        if (!a) {
          this.$message('无数据')
        }
      } else if (this.value !== '') {
        this.getMaterialCategory()
        console.log(this.tableDate)
        this.aab = true
      }
    }
  }
}
</script>

<style scoped  lang='scss'>
</style>
